<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>权限设置 - 管理系统</title>
  <link rel="stylesheet" href="css/http_cdn.jsdelivr.net_npm_bootstrap-icons@1.10.0_font_bootstrap-icons.css">
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #2c3e50;
      --accent-color: #e74c3c;
      --light-color: #ecf0f1;
      --dark-color: #34495e;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: #f5f7fa;
      color: #333;
      padding: 20px;
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: var(--secondary-color);
    }

    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
    }

    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }

    .btn-primary:hover {
      background-color: #2980b9;
    }

    .btn i {
      margin-right: 5px;
    }

    .card {
      background-color: white;
      border-radius: 6px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      overflow: hidden;
    }

    .card-header {
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--dark-color);
    }

    .card-body {
      padding: 20px;
    }

    .permission-tree {
      list-style: none;
      padding-left: 0;
    }

    .permission-tree ul {
      list-style: none;
      padding-left: 25px;
    }

    .permission-item {
      margin-bottom: 10px;
    }

    .permission-header {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background-color: #f8f9fa;
      border-radius: 4px;
      cursor: pointer;
    }

    .permission-header:hover {
      background-color: #e9ecef;
    }

    .permission-title {
      flex-grow: 1;
      font-weight: 500;
      color: var(--dark-color);
    }

    .permission-actions {
      display: flex;
      gap: 10px;
    }

    .permission-toggle {
      color: var(--primary-color);
      cursor: pointer;
      font-size: 14px;
    }

    .permission-checkbox {
      margin-right: 10px;
    }

    .permission-children {
      margin-top: 10px;
    }

    .search-box {
      position: relative;
      margin-bottom: 20px;
    }

    .search-box input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }

    .search-box i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #95a5a6;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-label {
      display: block;
      margin-bottom: 5px;
      font-weight: 500;
    }

    .form-control {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }
  </style>
</head>
<body>
<div class="page-header">
  <h1 class="page-title">权限设置</h1>
  <button class="btn btn-primary">
    <i class="bi bi-plus-circle"></i> 新增权限
  </button>
</div>

<div class="card">
  <div class="card-header">
    <h3 class="card-title">权限列表</h3>
    <div class="search-box">
      <i class="bi bi-search"></i>
      <input type="text" placeholder="搜索权限...">
    </div>
  </div>
  <div class="card-body">
    <ul class="permission-tree">
      <li class="permission-item">
        <div class="permission-header">
          <input type="checkbox" class="permission-checkbox">
          <span class="permission-title">系统管理</span>
          <div class="permission-actions">
            <span class="permission-toggle"><i class="bi bi-pencil"></i> 编辑</span>
            <span class="permission-toggle"><i class="bi bi-trash"></i> 删除</span>
            <span class="permission-toggle"><i class="bi bi-plus-circle"></i> 添加子权限</span>
          </div>
        </div>
        <ul class="permission-children">
          <li class="permission-item">
            <div class="permission-header">
              <input type="checkbox" class="permission-checkbox">
              <span class="permission-title">用户管理</span>
              <div class="permission-actions">
                <span class="permission-toggle"><i class="bi bi-pencil"></i> 编辑</span>
                <span class="permission-toggle"><i class="bi bi-trash"></i> 删除</span>
              </div>
            </div>
            <ul class="permission-children">
              <li class="permission-item">
                <div class="permission-header">
                  <input type="checkbox" class="permission-checkbox">
                  <span class="permission-title">查看用户列表</span>
                  <div class="permission-actions">
                    <span class="permission-toggle"><i class="bi bi-pencil"></i> 编辑</span>
                    <span class="permission-toggle"><i class="bi bi-trash"></i> 删除</span>
                  </div>
                </div>
              </li>
              <li class="permission-item">
                <div class="permission-header">
                  <input type="checkbox" class="permission-checkbox">
                  <span class="permission-title">添加用户</span>
                  <div class="permission-actions">
                    <span class="permission-toggle"><i class="bi bi-pencil"></i> 编辑</span>
                    <span class="permission-toggle"><i class="bi bi-trash"></i> 删除</span>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li class="permission-item">
            <div class="permission-header">
              <input type="checkbox" class="permission-checkbox">
              <span class="permission-title">角色管理</span>
              <div class="permission-actions">
                <span class="permission-toggle"><i class="bi bi-pencil"></i> 编辑</span>
                <span class="permission-toggle"><i class="bi bi-trash"></i> 删除</span>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li class="permission-item">
        <div class="permission-header">
          <input type="checkbox" class="permission-checkbox">
          <span class="permission-title">产品管理</span>
          <div class="permission-actions">
            <span class="permission-toggle"><i class="bi bi-pencil"></i> 编辑</span>
            <span class="permission-toggle"><i class="bi bi-trash"></i> 删除</span>
            <span class="permission-toggle"><i class="bi bi-plus-circle"></i> 添加子权限</span>
          </div>
        </div>
        <ul class="permission-children">
          <li class="permission-item">
            <div class="permission-header">
              <input type="checkbox" class="permission-checkbox">
              <span class="permission-title">查看产品</span>
              <div class="permission-actions">
                <span class="permission-toggle"><i class="bi bi-pencil"></i> 编辑</span>
                <span class="permission-toggle"><i class="bi bi-trash"></i> 删除</span>
              </div>
            </div>
          </li>
          <li class="permission-item">
            <div class="permission-header">
              <input type="checkbox" class="permission-checkbox">
              <span class="permission-title">编辑产品</span>
              <div class="permission-actions">
                <span class="permission-toggle"><i class="bi bi-pencil"></i> 编辑</span>
                <span class="permission-toggle"><i class="bi bi-trash"></i> 删除</span>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h3 class="card-title">权限分配</h3>
  </div>
  <div class="card-body">
    <div class="form-group">
      <label class="form-label">选择角色</label>
      <select class="form-control">
        <option>超级管理员</option>
        <option>内容管理员</option>
        <option>订单管理员</option>
        <option>数据分析师</option>
      </select>
    </div>
    <div class="form-group">
      <label class="form-label">分配权限</label>
      <div style="max-height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 4px;">
        <ul class="permission-tree">
          <li class="permission-item">
            <div class="permission-header">
              <input type="checkbox" class="permission-checkbox">
              <span class="permission-title">系统管理</span>
            </div>
            <ul class="permission-children">
              <li class="permission-item">
                <div class="permission-header">
                  <input type="checkbox" class="permission-checkbox">
                  <span class="permission-title">用户管理</span>
                </div>
              </li>
              <li class="permission-item">
                <div class="permission-header">
                  <input type="checkbox" class="permission-checkbox">
                  <span class="permission-title">角色管理</span>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <button class="btn btn-primary">保存分配</button>
  </div>
</div>
</body>
</html>